<template>
<div class="content">
  <template v-if="title==='肃州区'">
    <div class="list" v-for="item in list" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>
  <template v-if="title==='金塔县'">
    <div class="list" v-for="item in list1" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>
  <template v-if="title==='敦煌市'">
    <div class="list" v-for="item in list2" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>
  <template v-if="title==='玉门市'">
    <div class="list" v-for="item in list3" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>
  <template v-if="title==='瓜州县'">
    <div class="list" v-for="item in list4" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>
  <template v-if="title==='肃北县'">
    <div class="list" v-for="item in list5" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>
  <template v-if="title==='阿克塞县'">
    <div class="list" v-for="item in list6" :key="item.id">
      <div class="count">{{item.number}}</div>
      <div class="name">{{item.name}}</div>
    </div>
  </template>

</div>
</template>

<script>
export default {
  name: "MapCount",
  props:{
    title:{
      type:String,
      default:''
    },
    countList:{}
  },
  data(){
    return {
      list:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      list1:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      list2:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      list3:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      list4:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      list5:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      list6:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
    }
  },
  methods:{
    assignment(){
      this.list[0].number = this.countList.suzhouCount.customerCount
      this.list[1].number = this.countList.suzhouCount.browseCount
      this.list[2].number = this.countList.suzhouCount.enterpriseCount
      this.list[3].number = this.countList.suzhouCount.jobCount
      this.list[4].number = this.countList.suzhouCount.deliveryCount
      this.list1[0].number = this.countList.jintaCount.customerCount
      this.list1[1].number = this.countList.jintaCount.browseCount
      this.list1[2].number = this.countList.jintaCount.enterpriseCount
      this.list1[3].number = this.countList.jintaCount.jobCount
      this.list1[4].number = this.countList.jintaCount.deliveryCount
      this.list2[0].number = this.countList.dunhuangCount.customerCount
      this.list2[1].number = this.countList.dunhuangCount.browseCount
      this.list2[2].number = this.countList.dunhuangCount.enterpriseCount
      this.list2[3].number = this.countList.dunhuangCount.jobCount
      this.list2[4].number = this.countList.dunhuangCount.deliveryCount
      this.list3[0].number = this.countList.yumenCount.customerCount
      this.list3[1].number = this.countList.yumenCount.browseCount
      this.list3[2].number = this.countList.yumenCount.enterpriseCount
      this.list3[3].number = this.countList.yumenCount.jobCount
      this.list3[4].number = this.countList.yumenCount.deliveryCount
      this.list4[0].number = this.countList.guazhouCount.customerCount
      this.list4[1].number = this.countList.guazhouCount.browseCount
      this.list4[2].number = this.countList.guazhouCount.enterpriseCount
      this.list4[3].number = this.countList.guazhouCount.jobCount
      this.list4[4].number = this.countList.guazhouCount.deliveryCount
      this.list5[0].number = this.countList.subeiCount.customerCount
      this.list5[1].number = this.countList.subeiCount.browseCount
      this.list5[2].number = this.countList.subeiCount.enterpriseCount
      this.list5[3].number = this.countList.subeiCount.jobCount
      this.list5[4].number = this.countList.subeiCount.deliveryCount
      this.list6[0].number = this.countList.akesaiCount.customerCount
      this.list6[1].number = this.countList.akesaiCount.browseCount
      this.list6[2].number = this.countList.akesaiCount.enterpriseCount
      this.list6[3].number = this.countList.akesaiCount.jobCount
      this.list6[4].number = this.countList.akesaiCount.deliveryCount
    }
  },
  mounted() {
    this.assignment()
  },
  computed:{
    thousands(){
      return typeof this.number==='number'?this.number.toLocaleString():this.number;
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  .list{
    border: 1px solid #0c1865;
    background: #164088;
    margin-right: 30px;
    padding: 20px 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .count{
      color: #ffffff;
      font-size: 30px;
    }
    .name{
      color: #ffffff;
    }
  }
}
</style>
